<template>
	<view class="page">
		<status-bar :title='title'></status-bar>
		
		<view class="kite-wrapper" :style="{height:'calc(100vh - '+totalHeight+'px)'}" v-if='onceLevel && onceLevel.length > 0'>
			<view class="kite-classify">
				<view class="kite-classify-names" v-for="(item,index) in onceLevel" :key="index" :class="oneShow == item.classify_id?'kite-classify-active':''" @click="goodsType(item.classify_id)" :style="{'--color': color}">
					<view class="kite-classify-box">
						<text class="kite-classify-name lines2">{{item.classify_name}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="kite-classify-content" style="height: 100%;overflow: hidden; ">
				
				
				<view class="kit-top-list">
					<scroll-view scroll-x="true" @scroll="scroll" class="srcollBox">
						<block v-for="(item,index) in secondLevel" :key="index">
							<view class="srclist" :class="{active:secondLevelindex == index}" @click="goodList(item.id,index)">{{item.name}}</view>
						</block>
					</scroll-view>
				</view>
				
				
				<scroll-view scroll-y="true"  class="crollbox" >
					<view class="boxsem">
						<view class="olllist" v-for="(item,index) in goodsData" :key="index" @click="toUrl('/pages/goods/goods_detail?goodsid='+item.goods_id+'&shop_id='+item.store_id)">
							<image :src="$imgUrls(item.img)" class="oll_img"></image>
							<view class="ceshie size28">{{item.name}}</view>
							<!-- <view class="yishou">
								<text class="yishouetext">已售</text>
								<text class="yishouetext">热度</text>
							</view> -->
							<view class="tuijian" :class="{'bornone': !item.profitTitle}">{{item.profitTitle}}</view>
							<view class="jiagene">{{item.price}}</view>
							<view class="tiyans" v-if="item.price_description">{{item.price_description}}</view>
						</view>
						
					</view>
				</scroll-view>
				
				
				
				<empty type='1' cat='4' v-if="noData1" msg='没有找到相关内容'></empty>
				</view>
				<view class="kite-clear"></view>
			</view>
			
			
			
		</view>
		<!-- <empty type='1' cat='2' v-if="noData" :msg='msg'></empty> -->
	</view>
</template>

<script>
	var that;
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				searchVal: '请输入搜索信息',
				classifyId: '',
				bid: uni.getStorageSync('bid'),
				secondLevel: '',   // 三级分类
				secondLevelindex:0,
				onceLevel: '',
				oneShow: '',
				classifyImg: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				shopid: '',
				shopId:'',
				title: uni.getStorage('startUp').title,
				noData: false,
				noData1: false,
				msg:'没有相关数据哦',
				
				
				classify_id:'',  // 二级栏目id
				classify_name:'', // 二级栏目名字
				state:1,
				page:1,
				pageNum:10,
				goodsData:[]
			}
		},
		onLoad(opts) {
			let that = this
			console.log(opts)
			if (opts.shopid) {
				that.shopid = opts.shopid;
				that.shopId = opts.shopid;
				that.topCategory();
			}
			if(opts.name){
				that.title = opts.name
			}
			
		},
		computed:{
			...mapState(['tabTitle','color','city','totalHeight','share']),
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			
			//  二级栏目
			topCategory: function() {
				let that = this;
				that.noData = false;
				
				that.$http.post({
					url: '/singleSaleApi/storeUpList',
					data: {
						shop_id: that.shopId,
						bid: that.bid,
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.onceLevel = res.data;
						that.classifyId = that.onceLevel[0].classify_id
						that.goodsType(that.onceLevel[0].classify_id);
						that.onceLevel.forEach((e, i) => {
							if (e.classify_atlas != null && e.classify_atlas) {
								let img = e.classify_atlas;
								let atla = img.split(',')[0];
								e.classify_atlas = that.$imgUrls(atla);
							} else {
								e.classify_atlas = '../../static/images/adv.png';
							}
						});
					} else {
						that.msg = res.msg
					}
					if(!that.onceLevel || that.onceLevel.length < 1){
						that.noData = true
					}
				})
			},
			 //  三级栏目
			goodsType: function(classifyId) {
				let that = this;
				that.noData1 = false
				that.$http.post({
					url: '/singleSaleApi/storeGoodsList',
					data: {
						shop_id: that.shopId,
						classify_id: classifyId,
						bid: that.bid,
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.secondLevel = res.data.list;
						if(that.secondLevel && that.secondLevel.length > 0){
							that.goodList(that.secondLevel[0].id)
							that.oneShow = classifyId;
							// that.noData1 = false;
							// console.log(2222)
						}else{
							that.goodList(res.data.classify_id)
							that.classify_id = res.data.classify_id;
							that.oneShow = res.data.classify_id;
							// console.log(1)
							// that.noData1 = true
						}
						
						if (that.secondLevel == undefined || that.secondLevel == '') {
							that.secondLevel = [];
						}
					}
					// if(that.secondLevel.length < 1){
					// 	that.noData1 = false
					// }
				})
			},
			
			//  三级栏目图文
			
			goodList(classify_id,index){
			  let that = this;
			  if(index){
				  that.secondLevelindex = index;
			  }else{
				  that.secondLevelindex = 0;
			  }
			  that.$http.post({
				  url:'/singleSaleApi/sortClassGoods',
				  data:{
					  state:that.state,
					  page:that.page,
					  pageNum:that.pageNum,
					  bid: that.bid,
					  shop_id:that.shopId,
					  v_id:uni.getStorageSync('vid'),
					  classify_id:classify_id
				  }
			  }).then(res=>{
				  if(res.code == '100'){
					  if(res.data.DataArr){
						  that.noData1 = false;
						  that.goodsData = [];
						  that.goodsData = res.data.DataArr;
						  console.log(that.goodsData)
					  }else{
						  console.log('没有')
						  that.goodsData = [];
						  that.noData1 = true;
					  }
				  }
			  })
			},
			goodsShow: function(hello) {
				uni.showToast({
					title:hello,
					icon:'none'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.crollbox{
		height: calc(100% - 80rpx); 
		display: flex;
		flex-wrap: wrap;
		.boxsem{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.olllist{
				width:270rpx;
				// height: 450rpx;
				margin-bottom: 20rpx;
				border:1px solid #EEEEEE;
				.oll_img{
					width:100%;
					height: 260rpx;
				}
				.ceshie{
					margin-top:4rpx;
					padding:0 14rpx;
					// justify-content: center;
				}
				// .yishou{
				// 	.yishouetext{
						
				// 	}
				// }
				.tuijian{
					 font-size: 20rpx;
					 border-radius: 6rpx;
					 border: 1rpx solid #EEEEEE;
					 display: inline-block;
					 padding: 2rpx 8rpx;
					 margin-top:10rpx;
					 color: #ff4400;
					 margin-left: 14rpx;
					 
				}
				.jiagene{
					font-size: 32rpx;
					color: #ff4400;
					position: relative;
					padding-left:14rpx;
					margin-top:6rpx;
				}
				.jiagene::before{
					content: '￥';
					font-weight: normal;
					color: inherit;
					font-size: 24rpx;
				}
				.tiyans{
					color: #333333;
					padding: 0;
					font-size: 24rpx;
					padding-left:14rpx;
					margin-top:6rpx;
				}
			}
		}

	}
	
	
	page {
		background-color: #FFFFFF;
		min-height: calc(100vh - constant(safe-area-inset-bottom));
		min-height: calc(100vh - env(safe-area-inset-bottom));
	}
	
	.kit-top-list{
		width:100%;
		height: 80rpx;
		position: relative;
		white-space: nowrap;
		.srcollBox{
			width:100%;
			height: 100%;
			display: block;
			.srclist{
				height: 100%;
				line-height: 80rpx;
				font-size:28rpx;
				color:#333333;
				padding: 0 15rpx;
				display: inline-block;
			}
			.active{
				color:#6fdbce;
			}
		}
	}
	
	.kite-nav {
		position: fixed;
		z-index: 10;
	}
	.kite-wrapper {
		width: 100%;
	}

	.kite-classify {
		width: 20%;
		float: left;
		height: 100%;
		background-color: #F5F5F5;
		overflow-y: auto;
	}

	.kite-classify-content {
		width: 80%;
		float: right;
		padding: 0 20upx;
	}

	.kite-classify-names {
		position: relative;
		width: 100%;
		height: 100upx;
		text-align: center;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
	}

	.kite-classify-box {
		position: absolute;
		width: 100%;
		height: 50upx;
		/* line-height: 50upx; */
		/* margin: 25upx 0; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kite-classify-names.kite-classify-active {
		background-color: white;
	}

	.kite-classify-name {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		padding: 0 10rpx;
	}

	.kite-classify-names.kite-classify-active .kite-classify-name {
		color: #333333;
		font-weight: bold;
	}

	.kite-classify-names.kite-classify-active .kite-classify-box {
		width: 100%;
		border-left-width: 6upx;
		border-left-style: solid;
	}

	.kite-classify-warpper {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.kite-classify-banner {
		width: 100%;
		height: 190upx;
		border-radius: 16upx;
		overflow: hidden;
		margin: 20upx 0;
		background-color: #F5F5F5;
	}

	.kite-banner {
		width: 100%;
		height: 190upx;
	}

	.kite-search-content {
		width: 90%;
		margin: 0 5%;
	}

	.kite-goods-box {
		width: 100%;
		height: auto;
		/* padding-bottom: 20upx; */
	}

	.kite-classify-goods {
		width: 98%;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.kite-goods-title {
		width: 100%;
		height: 36upx;
		line-height: 36upx;
		font-size: 24upx;
		font-weight: bold;
		color: #333333;
		padding: 20upx 0 0 20upx;
	}

	.kite-goods {
		width: 100%;
		padding: 0 0 20upx 0;
		box-sizing: border-box;
		box-shadow: -2upx 2upx 6upx 0upx #F5F5F5;
		margin: 0 0 20upx 0;
	}

	.kite-goods-warpper {
		float: left;
		width: 33.3%;
		height: 216upx;
		text-align: center;
		overflow: hidden;
	}

	.kite-img-box {
		position: relative;
		width: 128upx;
		height: 180upx;
		overflow: hidden;
		margin: 0 auto;
	}

	.kite-goods-img {
		position: absolute;
		width: 120upx;
		height: 120upx;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}
</style>
